import React from 'react';
import { Typography, Row, Col, Card, Avatar, Button, Tabs } from 'antd';
import { GithubOutlined, LinkedinOutlined, GlobalOutlined } from '@ant-design/icons';
import './style.less';

const { Title, Paragraph } = Typography;
const { TabPane } = Tabs;

interface TeamMember {
  name: string;
  title: string;
  avatar: string;
  bio: string;
  blog?: string;
  github?: string;
  linkedin?: string;
}

const TeamPage: React.FC = () => {
  // 教师团队
  const teachers: TeamMember[] = [
    {
      name: '葛教授',
      title: '实验室指导老师',
      avatar: '/public/肘元哲.jpg',
      bio: '计算机科学博士，主要研究方向为Web前端技术、人机交互和可视化。曾在多家知名企业担任技术顾问，发表学术论文20余篇。',
      blog: 'https://example.com/zhangprof',
      github: 'https://github.com/zhangprof',
    },
  ];

  // 本科生团队
  const undergraduates: TeamMember[] = [
    {
      name: '吴同学',
      title: '本科生',
      avatar: '/public/吴建人.jpg',
      bio: '前端开发方向，熟悉React和Vue框架，参与了多个实验室项目的开发。',
      blog: 'https://blog.csdn.net/wujianrenn',
      github: 'https://github.com/orgs/EpiHome/people/wujianrenn',
    },
    {
      name: '李同学',
      title: '本科生',
      avatar: '/public/李扬帆.jpg',
      bio: '后端开发方向，擅长Java和Spring框架，负责实验室多个项目的后端开发。',
      github: 'https://github.com/orgs/EpiHome/people/MistLy2',
    },
    {
      name: '周同学',
      title: '本科生',
      avatar: '/public/肘学长.jpg',
      bio: '后端开发方向，对C++与算法有浓厚兴趣，参与了多个项目的后端开发。',
      blog: 'https://blog.csdn.net/weixin_74112538',
      github: 'https://github.com/orgs/EpiHome/people/zhou-yidie',
    },
     {
      name: '李同学',
      title: '本科生',
      avatar: '/public/康康.jpg',
      bio: '人工智能方向，对机器学习和数据分析有浓厚兴趣，参与了多个AI相关项目。',
      blog: 'https://blog.csdn.net/2302_80236633',
      github: 'https://github.com/orgs/EpiHome/people/KangkangLoveNLP',
    },
    {
      name: '程同学',
      title: '本科生',
      avatar: '/public/小程.jpg',
      bio: '后端方向，熟练掌握go语言及框架，参与了多个后端项目。',
      github: 'https://github.com/orgs/EpiHome/people/dawmnn',
    },
    {
      name: '栗同学',
      title: '本科生',
      avatar: '/public/励志轩.jpg',
      bio: '前端方向，对前端开发有浓厚兴趣，参与了多个项目的前端开发。',
      blog:'https://blog.csdn.net/chestnut_orenge',
      github: 'https://github.com/orgs/EpiHome/people/justice049',
    },
      {
      name: '侯同学',
      title: '本科生',
      avatar: '/public/八老师.jpg',
      bio: '前端方向，掌握多项前端技术，参与了多个项目的前端开发。',
      blog:'https://blog.csdn.net/Au_ust?type=blog',
      github: 'https://github.com/orgs/EpiHome/people/Au-ust',
    },
  ];

  // 渲染团队成员卡片
  const renderMemberCard = (member: TeamMember) => (
    <Card className="member-card" hoverable>
      <div className="member-header">
        <Avatar size={80} src={member.avatar} />
        <div className="member-title">
          <Title level={4}>{member.name}</Title>
          <Paragraph>{member.title}</Paragraph>
        </div>
      </div>
      <Paragraph className="member-bio">{member.bio}</Paragraph>
      <div className="member-links">
        {member.blog && (
          <Button type="link" icon={<GlobalOutlined />} href={member.blog} target="_blank">
            个人博客
          </Button>
        )}
        {member.github && (
          <Button type="link" icon={<GithubOutlined />} href={member.github} target="_blank">
            GitHub
          </Button>
        )}
        {member.linkedin && (
          <Button type="link" icon={<LinkedinOutlined />} href={member.linkedin} target="_blank">
            LinkedIn
          </Button>
        )}
      </div>
    </Card>
  );

  return (
    <div className="team-container">
      <div className="team-intro">
        <Title level={2}>团队成员</Title>
        <Paragraph>
          我们的团队由经验丰富的教师和充满活力的学生组成，涵盖前端、后端和人工智能三个研究方向。
          团队成员定期进行技术分享和项目合作，共同推动实验室的研究和发展。
        </Paragraph>
      </div>

      <Tabs defaultActiveKey="teachers" className="team-tabs">
        <TabPane tab="指导教师" key="teachers">
          <Row gutter={[24, 24]}>
            {teachers.map((teacher, index) => (
              <Col xs={24} sm={12} md={8} key={index}>
                {renderMemberCard(teacher)}
              </Col>
            ))}
          </Row>
        </TabPane>
        <TabPane tab="本科生" key="undergraduates">
          <Row gutter={[24, 24]}>
            {undergraduates.map((undergraduate, index) => (
              <Col xs={24} sm={12} md={8} key={index}>
                {renderMemberCard(undergraduate)}
              </Col>
            ))}
          </Row>
        </TabPane>
      </Tabs>
    </div>
  );
};

export default TeamPage;